<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_dom</title>
</head>
<body>
<input value="bbb">
<button id="aaa">点击</button>
<script>
    <!--
    dom文档对象模型,将文本转成对象,进而实现静态页面到动态页面
    浏览器的炫酷的功能,其实是由dom实现的,浏览器在展示页面的的时候,将这些属性都转换成dom
    属性,当你改属性的时候,其实就是改的是他的相对应的dom属性,起自己原有的属性并没有改,而将
    dom属性展示给用户看,即把value值改了,能在网页上展现出来,但是原value是不变的
    -->
    var input = document.getElementsByTagName('input')[0];
    input.value = 'zzzz';//获取dom属性(相当于将其变成dom属性)
   // document.getElementById('aaa').onclick = function () {
       // alert(input.value)
    //}
    document.getElementById('aaa').onclick = function () {
        //获取html属性,这个属性不会随着代码的执行而改变,永远拿的是最初值
        var htmlVal = input.getAttribute('value');
        alert(htmlVal);
    };
    document.getElementById('aaa').onclick = function () {
        //获取html属性,这个属性不会随着代码的执行而改变,永远拿的是最初值
        var htmlVal = input.getAttribute('value');
        input.setAttribute('value','ccc');//尽量少用,浏览器不一定支持
        alert(htmlVal);
    }
</script>
</body>
</html>